<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>我是第一个计算器</h1>
        <counter :colora='color1'></counter>
        <span>--------------------------------------------------------------------</span>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <h1>我是第二个计算器</h1>
        <counter></counter>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        Vue.component('counter', {
            props: ['colora'],
            data: function() {
                return {
                    num1: 0,
                    num2: 0,
                    result: 0
                }
            },
            methods: {
                add: function() {
                    this.result = parseInt(this.num1) + parseInt(this.num2)
                }
            },
            template: `
      <div class='container'>
        <input type="text" v-model="num1" :style = '{backgroundColor:colora}'>
        +
        <input type="text" v-model="num2">
        <button @click="add">=</button>
        <span>{{result}}</span>
      </div>
      `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                color1: 'red',
                color2: 'green'
            }
        });
        /**
          已知counter是一个组件, 这个组件在已经在vm对象所托管的元素使用
          如果在使用counter组件的时候, 我想将vm对象中的data数据里的color1和color2给counter子组件, counter拿到数据之后, 将获取到的颜色信息设置给组件的背景颜色, 应该怎么做?
        **/
    </script>
</body>

</html>